<template>
    <div class="shoucang-page">
        <div class="top-seach">我的收藏
            <span class="edit" :class="{'active':show}" @click="xian"></span>
        </div>
        <ul>
            <li>
                <SliderDelete :sliderConf="sliderConf"> 
                    <div class="gou" v-show="show"></div>
                    <div class="contant">
                        <div class="img"></div>
                        <div class="text">
                            <div class="w">今日特价新鲜蔬菜随机组合套餐 红椒卷心菜花菜</div>
                            <div class="m">¥69.9</div>
                        </div>
                    </div>
                    <div class="trash"><span></span></div>
                </SliderDelete>    
            </li>
            
        </ul>
        <div class="jiesuan" v-show="show">
            <div class="gou"><span></span>全选</div>
            <div class="btn">删除</div>
        </div>
    </div>
</template>



<script>
 import SliderDelete from "../../../../commend/slider_delete/slider_delete";  
export default {
    data() {
        return {
            sliderConf:{//滑动配置  
                distance:1.22,  
            },
            show:false  
        }
    },
    methods:{
        xian:function(){
            this.show = !this.show;
        }
    },
    components:{  
        SliderDelete
    }  
}
</script>

<style lang="less" rel="stylesheet/less">
.shoucang-page{
    padding-top:0.88rem;
    padding-bottom:1.88rem;
   .top-seach{
       width:100%;
       height:0.88rem;
       position:fixed;
       top:0;
       left:0;
       z-index:11;
       background:#00D397;
       line-height:0.88rem;
       text-align:center;
       font-size: 0.34rem;
       color: #FFFFFF;
       .edit{
           width:0.4rem;
           height:0.38rem;
           background:url('edit.png') no-repeat;
           background-size:100% 100%;
           display:block;
           position:absolute;
           right:0.2rem;
           top:0.26rem;
           &.active{
               width:0.37rem;
               height:0.26rem;
               background:url('edit-active.png') no-repeat;
               background-size:100% 100%;
           }
       }
   } 
    ul{ 
        width:100%;
        height:auto;
        overflow-x:hidden;
        padding-bottom:1.88rem;
        li{
            height:2.2rem;
            width:8.72rem;
            display:flex;
            border-bottom: 1px solid #EAEAEA;
           .gou{
               width:0.34rem;
               height:0.34rem;
               background:url('black.png') no-repeat;
               background-size:100% 100%;
               margin:0.9rem 0.2rem 0 0.2rem;
           }
           .contant{
               width:7.5rem;
               height:2.2rem;
               display:flex;
               background: #FFFFFF;
               .img{
                   width:2.2rem;
                   height:2.2rem;
               }
               .text{
                   width:3.68rem;
                   height:2.2rem;
                   .w{
                        font-size:0.26rem;
                        color: #333333;
                        width:3.48rem;
                        margin:0.28rem 0 0 0.2rem;
                   }
                   .m{
                        font-size: 0.3rem;
                        color: #FE5E5E;
                        margin:0.5rem 0 0 0.2rem;
                   }
               }
           }
           .trash{
               width:1.22rem;
               height:2.22rem;
               background: #00D397;
               position:relative;
               span{
                   width:0.26rem;
                   height:0.32rem;
                   display:block;
                   margin:auto;
                   position:absolute;
                   top:0;
                   left:0;
                   bottom:0;
                   right:0;
                   background:url('trash.png') no-repeat;
                   background-size:100% 100%;
               }
           }
        }
    }
    .jiesuan{
        width:100%;
        height:1rem;
        background:rgba(0,0,0,0.69);
        position:fixed;
        left:0;
        bottom:1rem;
        display:flex;
        .gou{
            font-size: 0.26rem;
            color: #DFDFDF;
            line-height:1rem;
            span{
                width:0.34rem;
                height:0.34rem;
                display:inline-block;
                background:url('white.png') no-repeat;
                background-size:100%;
                margin:0 0.12rem 0 0.23rem;
                vertical-align: middle;
            }
        }
        .money{
            font-size: 0.26rem;
            color: #DFDFDF;
            line-height:1rem;
            margin-left:0.67rem;
        }
        .btn{
            width:1.84rem;
            height:0.6rem;
            text-align:center;
            line-height:0.6rem;
            font-size: 0.34rem;
            color: #00D397;
            border-left:1px solid #00D397;
            position:absolute;
            right:0;
            top:0.2rem;
        }
    }
}
</style>

